import { UseSearch, UseTable } from '@/components';
import DepartmentController from '@/services/System/DepartmentController';
import { PageContainer } from '@ant-design/pro-layout';
import {PlusOutlined} from '@ant-design/icons'
import { Card,Button, Modal } from 'antd';
import React from 'react';
import Detail from './Detail';
class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            query:{},
            rowData:{},
            refresh:false
         };
    }
    refresh=()=>{
        this.setState({refresh:!this.state.refresh})
    }
    getList=(query)=>{
        return DepartmentController.getList(query)
    }
    handleSearch=(query)=>{
        this.setState({query})
        this.refresh()
    }
    reset=()=>{
        this.setState({query:{}})
        this.refresh()
    }
    onRef=(ref)=>{
        this.setState({
            modal:ref
        })
    }
    submit=()=>{
        this.state.modal.submit()
        this.refresh()
    }
    showModal=(rowData,type)=>{
        this.setState({
            visibleModal:true,
            rowData,
            type
        })
    }
    
    render() {
        const {query,visibleModal,rowData,type,refresh} = this.state
        const columns=[
            {title:'序号',dataIndex:'id',align:'center'},
            // {title:'部门编号',dataIndex:'code',align:'center'},
            {title:'部门名称',dataIndex:'name',align:'center'},
            {title:'级别',dataIndex:'type',align:'center'},
            {title:'是否停用',dataIndex:'toStop',align:'center',render:text=>text==='1'?'正常':'停用'},
            {title:'操作',dataIndex:'id',align:'center',render:(text,rowData)=><div>
                <Button type={"primary"} style={{margin:5}} onClick={this.showModal.bind(this,rowData,2)}>修改</Button>
            </div>},

        ]
        const searchItem=[
            {name:'部门名称',keyName:'name',valueType:'text'},
            {name:'级别',keyName:'type',valueType:'select',selectDatas:[{code:'省级',name:'省级'},{code:'市级',name:'市级'}]},
            {name:'状态',keyName:'isStop',valueType:'select',selectDatas:[{code:'1',name:'正常'},{code:'2',name:'停用'}]},
        ]
        return (
            <PageContainer>
                <Card>
                    <UseSearch searchItem={searchItem} handleSearch={this.handleSearch} reset={this.reset}
                    content={<Button type={'primary'} onClick={()=>this.setState({visibleModal:true,type:1})} icon={<PlusOutlined/>}>新建</Button>}
                    ></UseSearch>
                </Card>
                <Card>
                    <UseTable columns={columns} getData={this.getList} rowKey={'id'} query={query} refresh={refresh}></UseTable>
                </Card>
                <Modal
                title={'添加新部门'}
                visible={visibleModal}
                onCancel={()=>this.setState({visibleModal:false})}
                onOk={this.submit}
                width={600}
                    >
                        {visibleModal&&<Detail rowData={rowData} onRef={this.onRef} onCancel={()=>this.setState({visibleModal:false})} type={type}/>}
                    </Modal>
            </PageContainer>
        );
    }
}

export default index;